<template>
  <view class="template-index tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha :isBack="false" :bottomShadow="false">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <view class="custom-nav__back" @click="tn('/homePages/about')">
          <view class="logo-pic tn-shadow-blur" style="background-image:url('/static/tabbar/logo.png')">
            <view class="logo-image">
            </view>
          </view>
          <!-- <view class="tn-icon-left"></view> -->
        </view>
        <!-- 搜索框 -->
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center" @click="tn('/homePages/search')">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left" style="background-color: rgba(230,230,230,0.3);">
            <view class="custom-nav__search__icon tn-icon-search tn-color-white"></view>
            <view class="custom-nav__search__text tn-padding-left-xs tn-color-white">搜索 活动</view>
          </view>
        </view>
      </view>
    </tn-nav-bar>
    
    <swiper class="card-swiper" @click="tn('/homePages/navigation')" :circular="true"
      :autoplay="true" duration="500" interval="8000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
    <!-- 公告条：轮播图下方，四宫格上方 -->
    <view class="tn-margin-xs tn-margin-top-sm">
      <tn-notice-bar
        :list="noticeList"
        mode="vertical"
        leftIconName="sound"
        :leftIconSize="30"
        :duration="3000"
        :autoplay="true"
      ></tn-notice-bar>
    </view>
    
    
    <!-- 方式12 start-->
    <view v-if="isAndroid" class="tn-flex tn-margin-xs tn-padding-top-sm">
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/realname_authentication')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-identity-fill tn-three" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">校友卡</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="goCircleTab()">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-like tn-three" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">捐赠</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="goActivityTab()">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-star-fill tn-three" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">校友活动</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/website')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-search tn-three" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">找校友</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 方式12 end-->
    
    <!-- 方式12 start-->
    <view v-else class="tn-flex tn-margin-xs tn-padding-top-sm">
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/minePages/realname_authentication')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-identity-fill" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">校友卡</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="goCircleTab()">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-like" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">捐赠</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="goActivityTab()">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-star-fill" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">校友活动</text>
          </view>
        </view>
      </view>
      <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius" @click="tn('/preferredPages/website')">
        <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
          <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #0B3C22;">
            <view class="tn-icon-search" style="color: #FFFFFF;"></view>
          </view>  
          <view class="tn-color-black tn-text-center">
            <text class="tn-text-ellipsis">找校友</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 方式12 end-->
    
    
    
    
<!--    <view class="tn-margin-top">
      <view class="nav_title--wrap">
        <view class="nav_title tn-cool-bg-color-5">
          <text class="tn-icon-copy tn-padding-right-sm"></text>
          推 / 荐 / 博 / 主
          <text class="tn-icon-copy tn-padding-left-sm"></text>
        </view>
      </view>
    </view> -->
    
    <view class="tn-margin-top">
      <view class="section-title">
        <view class="title-text">校友名片</view>
        <view class="section-more" @click="tn('/circlePages/king')">
          <text class="more-text">全部</text>
          <text class="more-arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 校友名片网格布局 -->
    <view class="alumni-grid tn-margin-top-sm">
      <view class="alumni-card" v-for="(item, index) in enhancedResumeList" :key="index" @click="tn('/circlePages/king')">
        <view class="alumni-card-content">
          <!-- 头像 -->
          <view class="alumni-avatar">
            <image :src="item.avatar" mode="aspectFill" class="alumni-avatar-img" @error="handleAvatarError($event, index)"></image>
          </view>
          
          <!-- 信息区域 -->
          <view class="alumni-info">
            <view class="alumni-name-section">
              <text class="alumni-name">{{item.name}}</text>
              <!-- 状态图标 -->
              <view class="status-badge" :class="item.statusClass">
                <view class="tn-icon-leaf"></view>
              </view>
            </view>
            
            <!-- 公司 -->
            <text class="alumni-company" v-if="item.company">{{item.company}}</text>
            
            <!-- 职位 -->
            <text class="alumni-position" v-if="item.position">{{item.position}}</text>
            
            <!-- 地点 -->
            <text class="alumni-location" v-if="item.location">{{item.location}}</text>
            
            <!-- 单位和行业 -->
            <text class="alumni-organization" v-if="item.organization">{{item.organization}}</text>
            <text class="alumni-industry" v-if="item.industry">{{item.industry}}</text>
          </view>
        </view>
      </view>
    </view>
    
    
    <view class="activity-section">
      <view class="section-title">
        <view class="title-text">近期活动</view>
            <view class="section-more" @click="goActivityTab()">
              <text class="more-text">全部</text>
          <text class="more-arrow">></text>
        </view>
      </view>
      
      <view class="activity-list">
        <view class="activity-card" v-for="(item, index) in activityList" :key="index" @click="goActivityTab()">
          <view class="activity-content">
            <!-- 顶部图片 -->
            <view class="activity-image">
              <image :src="item.image" mode="aspectFill" @error="handleActivityImageError($event, index)"></image>
            </view>
            <!-- 底部内容 -->
            <view class="activity-bottom-content">
              <!-- 标题 -->
              <view class="activity-title">{{ item.title }}</view>
              <!-- 日期和报名人数放在一行 -->
              <view class="activity-date-participants">
                <view class="activity-date">
                  <text>{{ item.date }}</text>
                </view>
                <view class="activity-participants">
                  <text>{{ item.count }}人报名</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 校友组织 section -->
    <view class="organization-section">
      <view class="section-title">
        <view class="title-text">校友组织</view>
        <view class="section-more" @click="tn('/minePages/organizational')">
          <text class="more-text">全部</text>
          <text class="more-arrow">></text>
        </view>
      </view>
      
      <!-- 校友组织网格布局 -->
      <view class="organization-grid">
        <view class="organization-card" v-for="(item, index) in organizationList" :key="index">
          <view class="organization-card-content">
            <!-- Logo/图标 -->
            <view class="organization-logo">
              <image :src="item.logo" mode="aspectFill" v-if="item.logo" @error="handleOrgLogoError($event, index)"></image>
              <view class="organization-icon" v-else>
                <view class="icon-people"></view>
              </view>
            </view>
            <!-- 组织名称 -->
            <view class="organization-name">{{ item.name }}</view>
            <!-- 成员数量 -->
            <view class="organization-members">成员:{{ item.members }}人</view>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
  export default {
    name: 'Index',
    data(){
      return {
        activityList: [
          {
            id: 1,
            title: '2024届校友返校日活动',
            date: '2024-06-15至2024-06-16',
            location: '吉林农科院东校区',
            count: '238',
            type: '返校活动',
            statusText: '未开始',
            image: '/static/hd1.png'
          }
        ],
        cardCur: 0,
        isAndroid: true,
        noticeList: [
          '欢迎来到吉林农业科技学院校友会',
          '热门活动正在进行中，点击查看详情',
          '快来加入我们，一起分享你的故事吧'
        ],
        swiperList: [{
          id: 0,
          type: 'image',
          title: '',
          name: '',
          text: '',
          url: '/static/tabbar/lunbo1.jpg',
        }, {
          id: 1,
          type: 'image',
          title: '合作勾搭',
          name: '作者微信 tnkewo',
          text: '',
          url: '/static/tabbar/lunbo2.jpg',
        }, {
          id: 2,
          type: 'image',
          title: '海量分享',
          name: '总有你想不到的创意',
          text: '',
          url: '/static/tabbar/lunbo5.jpg',
        }, {
          id: 3,
          type: 'image',
          title: '酷炫多彩',
          name: '更多彩蛋等你探索',
          text: '',
          url: '/static/tabbar/lunbo9.jpg',
        }, {
          id: 4,
          type: 'image',
          title: '适配多端',
          name: 'APP、微信小程序、H5、Finclip',
          text: '',
          url: '/static/tabbar/lunbo10.jpg',
        },{
          id: 5,
          type: 'image',
          title: '',
          name: '',
          text: '',
          url: '/static/tabbar/lunbo11.jpg',
        }],
        cardCur2: 0,
        resumeList: [{
          id: 0,
          type: 'image',
          name: '徐圆圆',
          positionCollege: '某科技公司 · 设计部',
          college: '外国语学院',
          major: '英语',
          enrollYear: '2016',
          avatar: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg',
          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
        }, {
          id: 1,
          type: 'image',
          name: '王磊',
          positionCollege: 'XX科技 · UI设计',
          college: '电气学院',
          major: '计算机',
          enrollYear: '2017',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_1.jpeg',
          url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
        }, {
          id: 2,
          type: 'image',
          name: '李明',
          positionCollege: '会计',
          college: '经济管理学院',
          major: '工商管理',
          enrollYear: '2015',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg',
          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
        }, {
          id: 3,
          type: 'image',
          name: '张杰',
          positionCollege: '厨师',
          college: '食品学院',
          major: '烹饪',
          enrollYear: '2014',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_3.jpeg',
          url: 'https://resource.tuniaokj.com/images/resume/resume-bg2.jpg',
        }, {
          id: 4,
          type: 'image',
          name: '刘杰',
          positionCollege: '创业者',
          college: '机械学院',
          major: '土木工程',
          enrollYear: '2013',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_4.jpeg',
          url: 'https://resource.tuniaokj.com/images/resume/resume-bg.jpg',
        }],
        // 增强的校友数据，适配新模板
        enhancedResumeList: [
          {
            id: 1,
            name: '马化腾',
            avatar: '/static/tabbar/mht.png',
            company: '腾讯科技有限公司',
            location: '广东省东方县',
            organization: '',
            industry: '互联网行业',
            statusClass: 'badge-blue'
          },
          {
            id: 2,
            name: '马斯克',
            avatar: '/static/tabbar/msk.png',
            company: '特斯拉有限公司',
			
            location: '南非比勒陀利亚',
            organization: '',
            industry: '互联网行业',
            statusClass: 'badge-gray'
          },
          {
            id: 3,
            name: '雷军',
            avatar: '/static/tabbar/lj.png',
			location: '湖北省仙桃市',
            company: '小米科技有限责任公司',
            
            organization: '互联网行业',
            industry: '',
            statusClass: 'badge-blue'
          },
          {
            id: 4,
            name: '王健林',
            avatar: '/static/tabbar/wjl.png',
			location: '四川省成都市',
            company: '大连万达集团股份有限公司',
            
            organization: '',
            industry: '互联网行业',
            statusClass: 'badge-blue'
          },
          {
            id: 5,
            name: '张一鸣',
            avatar: '/static/tabbar/zym.png',
			location: '福建省龙岩市',
            company: '字节跳动',
            
            organization: '',
            industry: '互联网行业',
            statusClass: 'badge-blue'
          },
          {
            id: 6,
            name: '马云',
            avatar: '/static/tabbar/my.png',
			 location: '浙江省杭州市',
            company: '阿里巴巴',
           
            organization: '',
            industry: '开发行业',
            statusClass: 'badge-gray'
          }
        ],

        tuniaoData: [
          {
            title: 'UI设计',
            icon: 'image-text-fill',
            color: '#F33F5A',
            value: '前往咨询'
          },
          {
            title: '小程序',
            icon: 'data-fill',
            color: '#FFC32E',
            value: '前往咨询'
          },
          {
            title: '前端开发',
            icon: 'statistics-fill',
            color: '#954FF6',
            value: '前往咨询'
          },
          {
            title: '其他业务',
            icon: 'bankcard-fill',
            color: '#5177EE',
            value: '前往咨询'
          }
        ],
        activityList: [
          {
            id: 0,
            title: '"2024年校友返校日活动',
            image: '/static/hd1.png',
            date: '2024-06-15',
            count: '238人',
            status: 'ended',
            statusText: '未开始'
          },
          {
            id: 1,
            title: '农业科技行业校友交流会',
            image: '/static/hd6.png',
            date: '2024-05-20',
            count: '156人',
            status: 'ongoing',
            statusText: '进行中'
          },
          {
            id: 2,
            title: '校友企业校园招聘专场',
            image: '/static/hd7.jpg',
            date: '2024-04-10',
            count: '320人',
            status: 'upcoming',
            statusText: '已结束'
          }
        ],
        // 校友组织列表
        organizationList: [
          {
            id: 1,
            name: '北京校友会',
            members: 1280,
            logo: '/static/tabbar/navlogo.png'
          },
          {
            id: 2,
            name: '上海校友会',
            members: 2150,
            logo: '/static/tabbar/navlogo.png'
          },
          {
            id: 3,
            name: '广州校友会',
            members: 860,
            logo: '/static/tabbar/navlogo.png'
          },
          {
            id: 4,
            name: '深圳校友会',
            members: 920,
            logo: '/static/tabbar/navlogo.png'
          }
        ]
      }
    },
    created() {
      const systemInfo = uni.getSystemInfoSync()
      if (systemInfo.system.toLocaleLowerCase().includes('ios')) {
        this.isAndroid = false
      } else {
        this.isAndroid = true
      }
      // 页面加载时调用接口
      this.loadAllData()
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // resume - 保留以兼容代码结构
      resume(e) {
        this.cardCur2 = e.detail.current
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      // 跳转到底部导航-活动页（index=3）
      goActivityTab() {
      	uni.reLaunch({
      		url: '/pages/index?index=3'
      	});
      },
      // 跳转到底部导航-圈子页（index=1）
      goCircleTab() {
      	uni.reLaunch({
      		url: '/pages/index?index=1'
      	});
      },
      // 处理校友头像加载错误
      handleAvatarError(e, index) {
        console.error('校友头像加载失败:', this.enhancedResumeList[index]?.avatar)
        // 设置默认头像
        if (this.enhancedResumeList[index]) {
          this.$set(this.enhancedResumeList[index], 'avatar', '/static/tabbar/logo.png')
        }
      },
      // 处理组织Logo加载错误
      handleOrgLogoError(e, index) {
        console.error('组织Logo加载失败:', this.organizationList[index]?.logo)
        // 设置默认Logo
        if (this.organizationList[index]) {
          this.$set(this.organizationList[index], 'logo', '/static/tabbar/navlogo.png')
        }
      },
      // 处理活动图片加载错误
      handleActivityImageError(e, index) {
        console.error('活动图片加载失败:', this.activityList[index]?.image)
        // 设置默认图片
        if (this.activityList[index]) {
          this.$set(this.activityList[index], 'image', '/static/hd1.png')
        }
      },
      // 加载所有数据
      loadAllData() {
        this.getBannerList()
        this.getNoticeList()
        this.getCard6Alumni()
        this.getActivity3()
        this.getOrganization4()
      },
      // 获取轮播图列表
      getBannerList() {
        uni.request({
          url: 'http://localhost:8080/app/users/Banner',
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 后端返回格式: { code: 200, data: [...] }
              let list = []
              if (res.data && res.data.code === 200 && res.data.data) {
                list = res.data.data
              } else if (res.data && Array.isArray(res.data)) {
                // 兼容直接返回数组的情况
                list = res.data
              } else {
                console.error('获取轮播图失败: 数据格式不正确', res.data)
                return
              }
              // 处理图片 URL，将相对路径转换为完整 URL
              this.swiperList = list.map(item => {
                const newItem = { ...item }
                // 如果 url 是相对路径（以 / 开头但不是 http），则拼接服务器地址
                if (newItem.url && newItem.url.startsWith('/') && !newItem.url.startsWith('//')) {
                  newItem.url = 'http://localhost:8080' + newItem.url
                }
                return newItem
              })
            } else {
              console.error('获取轮播图失败:', res.data)
            }
          },
          fail: (err) => {
            console.error('请求轮播图接口失败:', err)
          }
        })
      },
      // 获取公告列表
      getNoticeList() {
        uni.request({
          url: 'http://localhost:8080/app/users/Notice',
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 后端返回格式: { code: 200, data: ["公告1", "公告2", ...] }
              if (res.data && res.data.code === 200 && res.data.data) {
                this.noticeList = res.data.data
              } else if (res.data && Array.isArray(res.data)) {
                // 兼容直接返回数组的情况
                this.noticeList = res.data
              } else {
                console.error('获取公告失败: 数据格式不正确', res.data)
              }
            } else {
              console.error('获取公告失败:', res.data)
            }
          },
          fail: (err) => {
            console.error('请求公告接口失败:', err)
          }
        })
      },
      // 获取六个校友信息
      getCard6Alumni() {
        uni.request({
          url: 'http://localhost:8080/app/users/Card6',
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 后端返回格式: { code: 200, rows: [...] }
              let list = []
              if (res.data && res.data.code === 200 && res.data.rows) {
                list = res.data.rows
              } else if (res.data && Array.isArray(res.data)) {
                // 兼容直接返回数组的情况
                list = res.data
              } else if (res.data && res.data.data && Array.isArray(res.data.data)) {
                // 兼容返回 { data: [...] } 的情况
                list = res.data.data
              } else {
                console.error('获取校友信息失败: 数据格式不正确', res.data)
                return
              }
              // 转换数据格式以适配前端显示
              this.enhancedResumeList = list.map(item => {
                // 处理头像 URL - 使用 avatar_url 字段
                let avatarUrl = item.avatar_url || item.avatarUrl || item.avatar || '/static/tabbar/logo.png'
                // 如果头像路径为空或无效，使用默认图片
                if (!avatarUrl || avatarUrl === 'null' || avatarUrl === 'undefined' || avatarUrl.trim() === '') {
                  avatarUrl = '/static/tabbar/logo.png'
                } else {
                  // 去除首尾空格
                  avatarUrl = avatarUrl.trim()
                  // 过滤掉测试URL（如example.com）
                  if (avatarUrl.includes('example.com') || avatarUrl.includes('placeholder')) {
                    avatarUrl = '/static/tabbar/logo.png'
                  } else if (avatarUrl.startsWith('/') && !avatarUrl.startsWith('//') && !avatarUrl.startsWith('/static/') && !avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
                    // 如果头像路径是相对路径（以 / 开头但不是 http），则拼接服务器地址
                    // 排除 /static/ 开头的本地资源路径
                    const path = avatarUrl.startsWith('/') ? avatarUrl : '/' + avatarUrl
                    avatarUrl = 'http://localhost:8080' + path
                  }
                }
                console.log('校友头像URL处理:', {
                  original: item.avatar_url || item.avatarUrl || item.avatar,
                  final: avatarUrl
                })
                return {
                  id: item.userId || item.id,
                  name: item.real_name || item.realName || item.name || '',
                  avatar: avatarUrl,
                  company: item.company || '',
                  position: item.position || '',
                  location: item.location || item.address || '',
                  organization: item.organization || '',
                  industry: item.industry || '',
                  statusClass: item.authStatus === 2 ? 'badge-blue' : 'badge-gray'
                }
              })
            } else {
              console.error('获取校友信息失败:', res.data)
            }
          },
          fail: (err) => {
            console.error('请求校友信息接口失败:', err)
          }
        })
      },
      // 获取近三个月的三条活动
      // 接口说明：/app/users/Activity3
      // 筛选条件（后端需要实现）：
      // 1. 返回最近3条活动记录
      // 2. 活动时间范围：近3个月内的活动
      // 3. 活动状态：建议返回未开始或进行中的活动
      // 4. 排序：按开始时间倒序（最新的在前）
      getActivity3() {
        uni.request({
          url: 'http://localhost:8080/app/users/Activity3',
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 后端返回格式: { code: 200, rows: [...] }
              let list = []
              if (res.data && res.data.code === 200 && res.data.rows) {
                list = res.data.rows
              } else if (res.data && Array.isArray(res.data)) {
                // 兼容直接返回数组的情况
                list = res.data
              } else if (res.data && res.data.data && Array.isArray(res.data.data)) {
                // 兼容返回 { data: [...] } 的情况
                list = res.data.data
              } else {
                console.error('获取活动列表失败: 数据格式不正确', res.data)
                return
              }
              console.log('活动原始数据:', list)
              // 转换数据格式以适配前端显示
              this.activityList = list.map(item => {
                // 格式化日期
                let dateStr = ''
                if (item.startTime) {
                  const startDate = new Date(item.startTime)
                  const endDate = item.endTime ? new Date(item.endTime) : startDate
                  const formatDate = (date) => {
                    const year = date.getFullYear()
                    const month = String(date.getMonth() + 1).padStart(2, '0')
                    const day = String(date.getDate()).padStart(2, '0')
                    return `${year}-${month}-${day}`
                  }
                  if (item.endTime && formatDate(startDate) !== formatDate(endDate)) {
                    dateStr = `${formatDate(startDate)}至${formatDate(endDate)}`
                  } else {
                    dateStr = formatDate(startDate)
                  }
                }
                // 处理图片 URL - 使用 main_image 字段
                let imageUrl = item.main_image || item.mainImage || item.imageUrl || item.image || '/static/hd1.png'
                // 如果图片路径为空或无效，使用默认图片
                if (!imageUrl || imageUrl === 'null' || imageUrl === 'undefined' || imageUrl.trim() === '') {
                  imageUrl = '/static/hd1.png'
                } else {
                  // 去除首尾空格
                  imageUrl = imageUrl.trim()
                  // 过滤掉测试URL（如example.com）
                  if (imageUrl.includes('example.com') || imageUrl.includes('placeholder')) {
                    imageUrl = '/static/hd1.png'
                  } else if (imageUrl.startsWith('/') && !imageUrl.startsWith('//') && !imageUrl.startsWith('/static/') && !imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
                    // 如果图片路径是相对路径（以 / 开头但不是 http），则拼接服务器地址
                    // 排除 /static/ 开头的本地资源路径
                    const path = imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl
                    imageUrl = 'http://localhost:8080' + path
                  }
                }
                // 最终图片URL
                const finalImageUrl = imageUrl
                console.log('活动图片URL处理:', {
                  original: item.main_image || item.mainImage || item.imageUrl || item.image,
                  final: finalImageUrl
                })
                return {
                  id: item.activityId || item.id,
                  title: item.title || '',
                  image: finalImageUrl,
                  date: dateStr,
                  location: item.location || item.address || '',
                  count: item.participantCount || item.count || '0',
                  status: item.status || 'upcoming',
                  statusText: item.statusText || '未开始'
                }
              })
              console.log('处理后的活动列表:', this.activityList)
            } else {
              console.error('获取活动列表失败:', res.data)
            }
          },
          fail: (err) => {
            console.error('请求活动接口失败:', err)
          }
        })
      },
      // 获取四个校友组织信息
      getOrganization4() {
        uni.request({
          url: 'http://localhost:8080/app/users/Organization4',
          method: 'GET',
          success: (res) => {
            if (res.statusCode === 200) {
              // 后端返回格式: { code: 200, rows: [...] }
              let list = []
              if (res.data && res.data.code === 200 && res.data.rows) {
                list = res.data.rows
              } else if (res.data && Array.isArray(res.data)) {
                // 兼容直接返回数组的情况
                list = res.data
              } else if (res.data && res.data.data && Array.isArray(res.data.data)) {
                // 兼容返回 { data: [...] } 的情况
                list = res.data.data
              } else {
                console.error('获取校友组织失败: 数据格式不正确', res.data)
                return
              }
              // 转换数据格式以适配前端显示
              this.organizationList = list.map(item => {
                // 处理组织封面 URL - 使用 organize_cover 字段
                let logoUrl = item.organize_cover || item.organizeCover || item.logo || item.logoUrl || '/static/tabbar/navlogo.png'
                // 如果封面路径为空或无效，使用默认图片
                if (!logoUrl || logoUrl === 'null' || logoUrl === 'undefined' || logoUrl.trim() === '') {
                  logoUrl = '/static/tabbar/navlogo.png'
                } else {
                  // 去除首尾空格
                  logoUrl = logoUrl.trim()
                  // 过滤掉测试URL（如example.com）
                  if (logoUrl.includes('example.com') || logoUrl.includes('placeholder')) {
                    logoUrl = '/static/tabbar/navlogo.png'
                  } else if (logoUrl.startsWith('/') && !logoUrl.startsWith('//') && !logoUrl.startsWith('/static/') && !logoUrl.startsWith('http://') && !logoUrl.startsWith('https://')) {
                    // 如果封面路径是相对路径（以 / 开头但不是 http），则拼接服务器地址
                    // 排除 /static/ 开头的本地资源路径
                    const path = logoUrl.startsWith('/') ? logoUrl : '/' + logoUrl
                    logoUrl = 'http://localhost:8080' + path
                  }
                }
                console.log('组织封面URL处理:', {
                  original: item.organize_cover || item.organizeCover || item.logo || item.logoUrl,
                  final: logoUrl
                })
                return {
                  id: item.organizationId || item.id,
                  name: item.name || item.organizationName || '',
                  members: item.memberCount || item.members || 0,
                  logo: logoUrl
                }
              })
            } else {
              console.error('获取校友组织失败:', res.data)
            }
          },
          fail: (err) => {
            console.error('请求校友组织接口失败:', err)
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .template-index{
    max-height: 100vh;
    padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
    min-height: calc(100vh - env(safe-area-inset-bottom));
  }
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  

  /* 轮播视觉差 start */
  .card-swiper {
    height: 540rpx !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    // padding: 0rpx 30rpx 90rpx 30rpx;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }
    
  .card-swiper swiper-item .swiper-item-text {
    margin-top: -320rpx;
    text-align: center;
    width: 100%;
    display: block;
    height: 50%;
    border-radius: 10rpx;
    transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item-text {
    margin-top: -320rpx;
    width: 100%;
    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
    height: 100%;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #FFFFFF;
    opacity: 0.6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -60rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 1;
    width: 30rpx;
    background-color: #FFFFFF;
  }
  
  /* 简历推荐 start */
  /* 校友名片网格布局样式 */
    .alumni-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 20rpx;
      margin-bottom: 30rpx;
    }
    
    .alumni-card {
      width: 48%;
      margin-bottom: 24rpx;
    }
    
    .alumni-card-content {
      background-color: #FFFFFF;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      padding: 24rpx;
      display: flex;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .alumni-card-content:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }
    
    /* 头像样式 */
    .alumni-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
    }
    
    .alumni-avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    
    /* 信息区域 */
    .alumni-info {
      flex: 1;
      min-width: 0;
    }
    
    /* 姓名和状态徽章 */
    .alumni-name-section {
      display: flex;
      align-items: center;
      margin-bottom: 8rpx;
    }
    
    .alumni-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #222222;
      margin-right: 8rpx;
    }
    
    /* 状态徽章 */
    .status-badge {
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16rpx;
    }
    
    .badge-blue {
      background-color: #E3F2FD;
      color: #2196F3;
    }
    
    .badge-gray {
      background-color: #F5F5F5;
      color: #9E9E9E;
    }
    
    /* 文字信息样式 */
    .alumni-company,
    .alumni-position,
    .alumni-location,
    .alumni-organization,
    .alumni-industry {
      display: block;
      font-size: 24rpx;
      color: #666666;
      margin-bottom: 4rpx;
      line-height: 36rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .alumni-company {
      color: #333333;
      font-weight: 500;
    }
  

  
  /* 底部tabbar假阴影 start*/
  .bg-tabbar-shadow{
    background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, #FFFFFF , #FFFFFF);
    position: fixed;
    bottom: 0;
    height: 450rpx;
    width: 100vw;
    z-index: -1;
  }
  
 /* 图标容器12 start */
 .tn-three{
     position: absolute;
     top: 50%;
     right: 50%;
     bottom: 50%;
     left: 50%;
     transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
     text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
 }
 .icon12 {
   &__item {
     width: 30%;
     background-color: #FFFFFF;
     border-radius: 10rpx;
     padding: 30rpx;
     margin: 20rpx 10rpx;
     transform: scale(1);
     transition: transform 0.3s linear;
     transform-origin: center center;
     
     &--icon {
       width: 100rpx;
       height: 100rpx;
       font-size: 60rpx;
       border-radius: 50%;
       margin-bottom: 18rpx;
       position: relative;
       z-index: 1;
       
       &::after {
         content: " ";
         position: absolute;
         z-index: -1;
         width: 100%;
         height: 100%;
         left: 0;
         bottom: 0;
         border-radius: inherit;
         opacity: 1;
         transform: scale(1, 1);
         background-size: 100% 100%;
         background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
 
           
       }
     }
   }
 }
  
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
    
    &__search {
      flex-basis: 60%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 70%;
        max-height: 66rpx;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 0 60rpx;
        font-size: 24rpx;
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
        // color: #AAAAAA;
      }
    }
  }
  .logo-image{
    width: 65rpx;
    height: 65rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
  }
  /* 自定义导航栏内容 end */
  

  /* 热门图片 start*/
  .image-tuniao1{
    padding: 165rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-tuniao2{
    padding: 75rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-tuniao3{
    padding: 90rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 10rpx;
  }
  /* 胶囊banner*/
  .image-capsule{
    padding: 100rpx 0rpx;
    font-size: 40rpx;
    font-weight: 300;
    position: relative;
  }
  .image-piccapsule{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 20rpx 20rpx 0 0;
  }
  
  /* 标题 start */
  .nav_title {
    -webkit-background-clip: text;
    color: transparent;
    
    &--wrap {
      position: relative;
      display: flex;
      height: 120rpx;
      font-size: 46rpx;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
      background-size: cover;
    }
  }
  /* 标题 end */
  
  /* 业务展示 start */
  .tn-info {
    
    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }
    
    &__item {
      width: 47.7%;
      margin: 15rpx 0rpx 30rpx 0rpx;
      padding: 40rpx 30rpx;
      border-radius: 10rpx;
      
  
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          font-size: 40rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          font-size: 25rpx;          
          
          &--data {
            color: rgba(255,255,255,0.5);
            margin-top: 5rpx;
            // font-weight: bold;
          }
        }
      }
      
      &__right {
        &--icon {
          position: absolute;
          right: 0rpx;
          top: 50rpx;
          font-size: 100rpx;
          width: 108rpx;
          height: 108rpx;
          text-align: center;
          line-height: 60rpx;
          opacity: 0.15;  
        }
      }
      &__bottom {
        box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
        border-radius: 0 0 10rpx 10rpx;
        position: absolute;
        width: 85%;
        line-height: 15rpx;
        left: 50%;
        bottom: -15rpx;
        transform: translateX(-50%);
        z-index: -1;
        text-align: center;
      }
    }
  }
  /* 业务展示 end */
  
  /* 底部tabbar start*/
  .footerfixed{
   position: fixed;
   width: 100%;
   bottom: 0;
   z-index: 999;
   background-color: #FFFFFF;
   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .tabbar {
    display: flex;
    align-items: center;
    min-height: 110rpx;
    justify-content: space-between;
  	padding: 0;
  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
  
  .tabbar .action {
  	font-size: 22rpx;
  	position: relative;
  	flex: 1;
  	text-align: center;
  	padding: 0;
  	display: block;
  	height: auto;
  	line-height: 1;
  	margin: 0;
  	overflow: initial;
  }
  
  .bar-center{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }  
  
  .tabbar .action .bar-icon {
  	width: 100rpx;
  	position: relative;
  	display: block;
  	height: auto;
  	margin: 0 auto 10rpx;
  	text-align: center;
  	font-size: 42rpx;
    // line-height: 50rpx;
  }
  
  .tabbar .action .bar-icon image {
  	width: 50rpx;
  	height: 50rpx;
  	display: inline-block;
  }
  
  .tabbar .action .bar-circle {
    position: relative;
    display: block;
    margin: 0rpx auto 0rpx;
    text-align: center;
    font-size: 52rpx;
    line-height: 90rpx;
    // background-color: #01BEFF;
    width: 100rpx !important;
    height: 100rpx !important;
    overflow: hidden;
    // border-radius: 50%;
    // box-shadow: 0px 10px 30px rgba(70,23,129, 0.12),
    //   0px -8px 40px rgba(255, 255, 255, 1),
    //   inset 0px -10px 10px rgba(70,23,129, 0.05),
    //   inset 0px 10px 20px rgba(255, 255, 255, 1);
    // box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
  }
  
  .tabbar .action .bar-circle image {
    width: 100rpx;
  	height: 100rpx;
  	display: inline-block;
    margin: 0rpx auto 0rpx;
  }
  
  /* 流星+悬浮 */
  .nav-index-button {
    animation: suspension 3s ease-in-out infinite;
    z-index: 999999;
    
    
    &__content {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        transform: scale(0.85);
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
        }
      }
    }
    
    &__meteor {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100rpx;
      height: 100rpx;
      transform-style: preserve-3d;
      transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
      
      &__wrapper {
        width: 100rpx;
        height: 100rpx;
        transform-style: preserve-3d;
        animation: spin 20s linear infinite;
      }
      
      &__item {
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        border-radius: 1000rpx;
        left: 0;
        top: 0;
        
        &--pic {
          display: block;
          width: 100%;
          height: 100%;
          background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc1.png) no-repeat center center;
          background-size: 100% 100%;
          animation: arc 4s linear infinite;
        }
      }
    }
  }
  
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.6rem);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotateX(0deg);
    }
  
    100% {
      transform: rotateX(-360deg);
    }
  }
  
  @keyframes arc {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* 近期活动板块 start */
  .activity-section {
    margin-top: 40rpx;
    margin-bottom: 30rpx;
  }
  
  .activity-list {
    margin-top: 20rpx;
    padding: 0 30rpx;
  }
  
 .activity-card {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 24rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  
  
  .activity-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .activity-image {
    width: 100%;
    height: 320rpx;
    overflow: hidden;
  }

  .activity-image image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .activity-bottom-content {
    padding: 20rpx;
  }
  
  .activity-title {
    font-size: 26rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 16rpx;
    text-align: left;
    line-height: 1.5;
  }
  
  .activity-info {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 16rpx;
    text-align: center;
    line-height: 1.5;
  }
  
  .activity-date-participants {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
  }
  
  .activity-footer {
    display: flex;
    justify-content: center;
    font-size: 26rpx;
  }
  
  .activity-participants {
    color: #999999;
    text-align: center;
    line-height: 1.5;
  }
  
  .activity-type {
    padding: 4rpx 16rpx;
    background-color: #F5F5F5;
    color: #666666;
    border-radius: 16rpx;
    text-align: center;
    line-height: 1.5;
  }
  
  /* 标题样式 */
  .section-title {
    padding: 0 30rpx;
    margin: 20rpx 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .section-more {
    display: flex;
    align-items: center;
    color: #666666;
  }
  
  .more-text {
    font-size: 26rpx;
    margin-right: 6rpx;
  }
  
  .more-arrow {
    font-size: 24rpx;
    color: #999999;
  }
  
  .section-title .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
    padding-left: 20rpx;
    display: flex;
    align-items: center;
  }
  
  .section-title .title-text::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 32rpx;
    background-color: #138e31;
    border-radius: 3rpx;
  }
  
  .activity-date {
    display: flex;
    align-items: center;
    color: #999999;
    text-align: center;
    line-height: 1.5;
  }
  
  .activity-location {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
  }
  
  .activity-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
  }
  
  .activity-participants {
    font-size: 24rpx;
    color: #666666;
  }
  
  .activity-type {
    font-size: 24rpx;
    color: #2196F3;
    border: 1rpx solid #2196F3;
    padding: 4rpx 16rpx;
    border-radius: 16rpx;
  }
  
  .activity-info-left,
  .activity-info-right {
    display: flex;
    align-items: center;
  }
  
  .activity-info text {
    margin-right: 10rpx;
  }
  /* 近期活动板块 end */
  
  /* 校友组织板块 start */
  .organization-section {
    margin-top: 0;
    padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
    margin-bottom: 0;
  }
  
  .organization-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-top: 20rpx;
    margin-bottom: 0;
    padding-bottom: 40rpx;
  }
  
  .organization-card {
    width: calc(50% - 12rpx);
    margin-bottom: 24rpx;
  }
  
  .organization-card-content {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .organization-card-content:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  }
  
  .organization-logo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .organization-logo image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .organization-icon {
    width: 100%;
    height: 100%;
    background-color: #E3F2FD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-people {
    width: 60rpx;
    height: 60rpx;
    position: relative;
  }
  
  .icon-people::before,
  .icon-people::after {
    content: '';
    position: absolute;
    background-color: #2196F3;
    border-radius: 50%;
  }
  
  .icon-people::before {
    width: 24rpx;
    height: 24rpx;
    top: 8rpx;
    left: 12rpx;
  }
  
  .icon-people::after {
    width: 20rpx;
    height: 20rpx;
    bottom: 12rpx;
    left: 24rpx;
    box-shadow: -16rpx 0 0 #2196F3;
  }
  
  .organization-name {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
    text-align: center;
    margin-bottom: 16rpx;
    line-height: 1.5;
    min-height: 84rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .organization-members {
    font-size: 24rpx;
    color: #999999;
    text-align: center;
  }
  /* 校友组织板块 end */
  
</style>